<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ol {
            background: #f7f7f7;
            color:#40485b;
            display:inline-block;
            border:1px solid #DDD;
            border-radius:3px;
            box-shadow:0 0 5px rgba(0,0,0,0.1);
            padding:0px;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Liberation Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif;
            font-size:14px;
            line-height:1.33
        }
        li.tail {
            border-bottom:0px;
        }
        li {
            list-style:none;
            border-bottom:1px solid #DDD;
            cursor:pointer;
            padding:5px 10px;
        }
        li:hover,li.select {
            background:#36F;
            color:#fff;
        }
    </style>
</head>
<body>
<div>
    <ol>
        <li>eillott 吴栋</li>
        <li>eillott 吴栋</li>
        <li class="tail">eillott 吴栋</li>
    </ol>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $("li:first").addClass("select");
    $(document).on("keydown" , function(e){
        if (40 === e.keyCode) {
           let next = $(".select").next();
            $(".select").removeClass("select");
            if (next.length == 0) {
                $("li:first").addClass("select");
            } else {
                next.addClass("select");
            }

        } else if (38 === e.keyCode) {
            let pre = $(".select").prev();
            $(".select").removeClass("select");
            if (pre.length == 0) {
                $("li:last").addClass("select");
            } else {
                pre.addClass("select");
            }
        }
    })
</script>
</body>
</html>